<template>
    <div class="order">
        <Navbar></Navbar>
        <Topper></Topper>
        <hr/>
        <p><Breadcrumb></Breadcrumb></p>
        <div class="main">
            <div class="order_level">
                <ul>
                   
                    <router-link to="/order">全部订单</router-link>
                    
                    <router-link  to="/order/panding">待付款</router-link>
                    <router-link  to="/order/receipt">待收货</router-link>
                    <router-link  to="/order/comment">待评价</router-link>
                   
                </ul>

            </div>
            
            <router-view/>



        </div>
        <Flower></Flower>
        <Footer></Footer>

    </div>
</template>

<script>

import Navbar from "@/components/Navbar.vue";
import Topper from "@/components/Topper.vue";
import Footer from "@/components/Footer";
import Flower from "@/components/Flower";
import Breadcrumb from '@/components/Breadcrumb.vue';
export default {
    components: {
        Navbar,
        Topper,
        Footer,
        Flower,
        Breadcrumb
    },
   
}
</script>

<style lang="scss">
.order {
    hr {
      border: none; /* 移除默认的边框 */
      height: 2px; /* 设置水平线的高度 */
      background-color: #884e22; /* 设置水平线的颜色 */
      margin: 20px 0; /* 设置上下外边距 */
    }
    background-color: #ffffff;

    .main {
        margin: auto;
        width: 80%;
        // border:1px solid black;

        .order_level {


            text-align: left;
            margin-bottom: 20px;

            ul {
                font-size: 20px;

                // margin-left: 30px;
                a {
                    text-decoration-line: none;
                    display: inline;
                    margin-right: 30px;
                    color: black;

                }

                a:hover {
                    color: #884e22;
                    cursor: pointer;
                    text-decoration-line: underline;
                    
                }
            }
        }

        .order_content {
            //    margin-right: 30px;
        }

    }

}
</style>